<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no" />
    <title>推送消息列表</title>
    <link rel="stylesheet" href="../../css/reset.css">
    <style>
        body {
            width: 100%;
            background-color: #fff;
            font-size: 0.28rem;
            height: auto;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            font-family: PingFang SC;
            color: #262626;
            background-color: #f8f8f8;
        }

        .messageList {
            width: 100%;
            height: auto;
            padding-top: 0.2rem;
        }

        .messageList ul {
            width: 100%;
            height: auto;
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
        }

        .messageList li {
            width: 6.9rem;
            height: 1rem;
            background: rgba(255, 255, 255, 1);
            border-radius: 0.08rem;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            padding: 0 0.2rem;
            box-sizing: border-box;
            margin-bottom: 0.2rem;
        }

        .circleBox {
            display: inline-block;
            width: 0.1rem;
            height: 0.1rem;
            background: rgba(227, 9, 32, 1);
            border-radius: 50%;
            margin-right: 0.12rem;
            min-height: 0.1rem;
            min-width: 0.1rem;
        }

        .messageList li p {
            flex: 1;
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: space-between;
            font-size: 0.28rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(38, 38, 38, 1);
        }

        .messageList li p>span:last-of-type {
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(137, 137, 137, 1);
        }
    </style>
</head>

<body>
    <div class="messageList">
        <ul id="messageList">
            <!-- <li>
                <span class="circleBox">

                </span>
                <p>
                    <span>
                        XXX合约包即将到期
                    </span>
                    <span>
                        2020-2-19
                    </span>
                </p>
            </li>
            <li>
                <span class="circleBox">

                </span>
                <p>
                    <span>
                        XXX合约包即将到期
                    </span>
                    <span>
                        2020-2-19
                    </span>
                </p>
            </li> -->
        </ul>
        <div id="listState" style="width: 100%;text-align: center;padding: 0.2rem 0;">
        </div>
    </div>
    <script src="../../script/autosize.js"></script>
    <script src="../../script/fastclick.js"></script>
    <script src="../../script/jquery_three_two_one.js"></script>
    <script src="../../script/dotmin.js"></script>
    <script src="../../script/app.js"></script>
    <script>
        apiready = function () {
            var app = new APP();
            var account = app.getAccount();
            app.headerMap();
            var curPage = 1;
            var totalPage = 0;
            app.jgPush.clearNotification();
            app.jgPush.setBadge({
                badge: 0
            });
            function getPageNum(curPage, isdown) {
                app.ajaxPro({
                    url: "send-msg/get-list",
                    values: {
                        token: account.token
                    },
                    openFlower: true
                }, function (ret) {
                    if (ret.code == 200) {
                        totalPage = ret.data.total_page;
                        var arrList = ret.data.data;
                        arrList.map(function (item) {
                            if (item.title.length > 10) {
                                item.title = item.title.slice(0, 10) + "……";
                            }
                        })
                        // 渲染模板
                        var temp = doT.template($("#bankList").text());
                        if (isdown) {
                            lists = arrList;
                        } else {
                            for (var i = 0; i < arrList.length; i++) {
                                lists.push(arrList[i]);
                            }
                        }
                        $("#messageList").html(temp(lists));
                        if (curPage == 1 && arrList.length == 0) {
                            $("#listState").text("暂时没有相关数据");
                        }
                    }
                })
            }
            getPageNum(curPage, true);
            $("#messageList").on("click", "li", function (params) {
                var thisId = $(this).attr("data-id");
                var tagType = $(this).attr("data-tagtype");
                if (tagType == 2) {
                    app.ajaxPro({
                        url: "send-msg/get",
                        values: {
                            pid: thisId,
                            token: account.token
                        },
                        openFlower: true
                    }, function (ret) {
                        if (ret.code == 200) {
                            app.trigger("readSuccful");
                            app.openWin({
                                name: "browser_headerwin",
                                url: app.hd + "common/headerwin.html",
                                pageParam: {
                                    subpage: ret.data.data.content,
                                    name: "browser",
                                    type: "remote",
                                    isremote: "true",
                                    title: ret.data.data.title
                                }
                            });
                        }
                    })
                } else {
                    var goPage = {
                        name: "pushnews_details",
                        subpage: "news/pushnews_details",
                        title: "消息",
                        param: {
                            pageName: "pushnews_details",
                            messageID: thisId
                        },
                    };
                    app.setNavBarAttr(goPage);
                }

            })
            app.toBottom(function () {
                if (curPage < totalPage) {
                    curPage++;
                    getPageNum(curPage, false);
                }
            });
            // 设置可以下拉加载
            app.downRefresh(function () {
                $(".addBankCard").empty();
                curPage = 1;
                totalPage = 0;
                getPageNum(curPage, true);
            });
            app.listen("readSuccful", function () {
                $(".addBankCard").empty();
                curPage = 1;
                totalPage = 0;
                getPageNum(curPage, true);
            })
        }
    </script>
    <script type="text/html" id="bankList">
    {{~it:value:index}}
        <li data-id={{=value.id}} data-tagtype={{=value.type}}>
        <span class="circleBox" style="display:{{=value.is_not_read==true? 'inline-block':'none'}};">
            </span>
            <p>
                <span>
                    {{=value.title}}
                </span>
                <span>
                    {{=value.send_at?value.send_at.split(" ")[0]:""}}
                </span>
            </p>
        </li>
    {{~}}
    </script>
</body>

</html>